<template>
  <div class="cim-imgViewer__viewer" :class="{ 'cim-imgViewer__viewer--show': view, 'cim-imgViewer__viewer--hidden': isViewHidden }">
    <div class="cim-imgViewer__viewer__mask" v-show="isShowMask"></div>

    <div
      class="cim-imgViewer__viewer__bigImg"
      :style="_bigImgWrapStyle"
      :class="{ 'cim-imgViewer__viewer__bigImg--opacityAni': opacityAnimationClass }"
      @mousedown="handleBigImgMouseDown"
      @mousemove="handleBigImgMouseMove"
      @mouseup="handleBigImgMouseUp"
      @mouseout="handleBigImgMouseUp"
    >
      <img
        :src="previewSrcList[currentSrcIndex]"
        alt=""
        :style="{width: selfDefineWidth, height: selfDefineHeight}"
        :draggable="false"
        @load="handleImgLoad"
        ref="bigImg"
      >

      <span class="cim-imgViewer__viewer__bigImg__dot cim-imgViewer__viewer__bigImg__dot--lt"
        @mousedown.stop="(e) => handleFlexImgStart(e, 0)"
      ></span>
      <span class="cim-imgViewer__viewer__bigImg__dot cim-imgViewer__viewer__bigImg__dot--rt"
        @mousedown.stop="(e) => handleFlexImgStart(e, 1)"
      ></span>
      <span class="cim-imgViewer__viewer__bigImg__dot cim-imgViewer__viewer__bigImg__dot--lb"
        @mousedown.stop="(e) => handleFlexImgStart(e, 3)"
      ></span>
      <span class="cim-imgViewer__viewer__bigImg__dot cim-imgViewer__viewer__bigImg__dot--rb"
        @mousedown.stop="(e) => handleFlexImgStart(e, 2)"
      ></span>
    </div>

    <ul class="cim-imgViewer__viewer__controls" v-if="previewSrcList.length > 1" v-show="isShowMask">
      <li class="cim-imgViewer__viewer__controls--prev" @click="handleChangeImg(-1)"><i class="el-icon-arrow-left"></i></li>
      <li class="cim-imgViewer__viewer__controls--next" @click="handleChangeImg(1)"><i class="el-icon-arrow-right"></i></li>
    </ul>

    <span class="cim-imgViewer__viewer__close" @click="handleCloseView" v-show="isShowMask"><i class="el-icon-circle-close"></i></span>

    <ul class="cim-imgViewer__viewer__tools">
      <li @click="() => handleScaleImg(-0.3)"><i class="el-icon-zoom-out"></i></li>
      <li @click="() => handleScaleImg(0.3)"><i class="el-icon-zoom-in"></i></li>
      <li @click="handleSwitchImgSize">
        <i :class="imgIsOrigin ? 'el-icon-c-scale-to-original' : 'el-icon-full-screen'"></i>
      </li>
      <li @click="() => handleRotateImg(-90)"><i class="el-icon-refresh-left"></i></li>
      <li @click="() => handleRotateImg(90)"><i class="el-icon-refresh-right"></i></li>
      <li title="取消背景"
        @click="isShowMask = !isShowMask"
      >
        <i class="el-icon-sunny" :style="{ color: isShowMask ? '#fff': 'aqua' }"></i>
      </li>
    </ul>
  </div>
</template>

<script>
import { Icon } from 'element-ui'
import '../../../styles/img-viewer.less'
import component from '../../../mixins/component'
import methods from './methods'

const compList = [Icon]

export default {
  name: 'Viewer',
  mixins: [component(compList), methods],
  props: {
    view: {
      type: Boolean,
      default: false
    },
    previewSrcList: {
      type: Array,
      default: () => []
    },
    previewIndex: {
      type: Number,
      default: 0
    },
    showFlag: {
      type: Boolean,
      default: false
    },
    selfDefineWidth: {
      type: String
    },
    selfDefineHeight: {
      type: String
    }
  },
  inject: ['baseTop', 'baseLeft'],
  data () {
    return {
      currentSrcIndex: this.previewIndex,
      bigImgWrapStyle: {
        width: 'auto',
        height: 'auto',
        top: `${this.baseTop}px`,
        left: `${this.baseLeft}px`,
        opacity: 0,
        scale: 1,
        rotate: 0
      },
      mousePosition: {
        x: 0,
        y: 0,
        isDown: false,
        isDotDown: false,
        xBase: 0,
        yBase: 0
      },
      opacityAnimationClass: true,
      imgOriginSize: {
        width: 0,
        height: 0
      },
      imgIsOrigin: false,
      isShowMask: true,
      isViewHidden: false
    }
  },
  computed: {
    _bigImgWrapStyle () {
      let { scale, rotate } = this.bigImgWrapStyle

      return Object.assign({}, this.bigImgWrapStyle, {
        transform: `scale(${scale}) rotate(${rotate}deg)`
      })
    }
  },
  watch: {
    view (val) {
      if (val) {
        this.handleSetImgWrapStyle()
      } else {
        this.bigImgWrapStyle = Object.assign({}, this.bigImgWrapStyle, {
          scale: 1,
          rotate: 0
        })
      }
    },
    previewIndex (index) {
      this.currentSrcIndex = index
    }
  },
  mounted () {
    document.addEventListener('mousewheel', this.handleWheelScalse)
    document.addEventListener('mousemove', this.handleFlexDotMouseMove)
    document.addEventListener('mouseup', this.handleFlexDotMouseUp)
  },
  destroyed () {
    document.removeEventListener('mousewheel', this.handleWheelScalse)
    document.removeEventListener('mousemove', this.handleFlexDotMouseMove)
    document.removeEventListener('mouseup', this.handleFlexDotMouseUp)
  }
}
</script>
